<template>
  <div class="app-container" style="height: 100%">
    <div
      class="app-container-inner"
      v-loading="loading"
      element-loading-text="加载中..."
      style="padding: 20px 24px; height: 100%"
    >
      <div style="display: flex; flex-direction: column; gap: 12px; height: 100%">
        <el-form
          ref="inviteCodeForm"
          class="box-content"
          :model="withdrawSetVo"
          @submit.prevent="() => {}"
          style="width: 100%; flex: 1"
          label-position="left"
        >
          <div class="form">
            <el-form-item class="form_item" label-width="336">
              <template #label>
                <div class="form_item_label">
                  <span class="name">开启工单提现</span>
                  <span class="tips">
                    <span>开启后：支持提现；关闭后：不支持提现，不显示提现功能；</span>
                  </span>
                </div>
              </template>
              <div class="form_item_content">
                <el-switch v-model="withdrawSetVo.enableOrderWithdraw" />
                <span v-if="withdrawSetVo.enableOrderWithdraw">开启</span>
                <span v-else>关闭</span>
              </div>
            </el-form-item>
            <el-form-item class="form_item" label-width="168">
              <template #label>
                <div class="form_item_label">
                  <span class="name">提现冻结期</span>
                  <span class="tips">设置工单完成后多久可以提现</span>
                </div>
              </template>
              <div class="form_item_content">
                <div style="display: flex; align-items: center; gap: 5px">
                  <el-input
                    v-model="withdrawSetVo.withdrawFreezeDay"
                    placeholder="请输入天数"
                    type="number"
                    step="1"
                    @input="
                      withdrawSetVo.withdrawFreezeDay = setInputValue(
                        withdrawSetVo.withdrawFreezeDay,
                        0,
                      )
                    "
                  >
                    <template #append>天</template>
                  </el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form_item" label-width="156">
              <template #label>
                <div class="form_item_label">
                  <span class="name">每月提现次数</span>
                  <span class="tips">设置每月最多可提现的次数</span>
                </div>
              </template>
              <div class="form_item_content">
                <div style="display: flex; align-items: center; gap: 5px">
                  <el-input
                    v-model="withdrawSetVo.monthWithdrawQty"
                    placeholder="请输入次数"
                    type="number"
                    step="1"
                    @input="
                      withdrawSetVo.monthWithdrawQty = setInputValue(
                        withdrawSetVo.monthWithdrawQty,
                        0,
                      )
                    "
                  >
                    <template #append>次</template>
                  </el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form_item" label-width="336">
              <template #label>
                <div class="form_item_label">
                  <span class="name">提现审核</span>
                  <span class="tips">开启后，提现需要审核；关闭后，提现申请直接通过；</span>
                </div>
              </template>
              <div class="form_item_content">
                <div style="display: flex; align-items: center; gap: 5px">
                  <el-switch v-model="withdrawSetVo.enableWithdrawCheck" />
                  <span v-if="withdrawSetVo.enableWithdrawCheck">开启</span>
                  <span v-else>关闭</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form_item" label-width="168">
              <template #label>
                <div class="form_item_label">
                  <span class="name">最低提现金额</span>
                  <span class="tips">设置最低提现金额</span>
                </div>
              </template>
              <div class="form_item_content">
                <div style="display: flex; align-items: center; gap: 5px">
                  <el-input
                    v-model="withdrawSetVo.minWithdrawMoney"
                    placeholder="请输入金额"
                    type="number"
                    step="1"
                    @input="
                      withdrawSetVo.minWithdrawMoney = setInputValue(
                        withdrawSetVo.minWithdrawMoney,
                        0,
                      )
                    "
                  >
                    <template #append>元</template>
                  </el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form_item" label-width="156">
              <template #label>
                <div class="form_item_label">
                  <span class="name">审核权限</span>
                  <span class="tips">有权审核提现的人</span>
                </div>
              </template>
              <div class="form_item_content">
                <div style="display: flex; align-items: center; gap: 5px">
                  <el-select
                    v-model="withdrawSetVo.empIds"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="请选择"
                    fit-input-width
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in customersData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="form_item" label-width="156">
              <template #label>
                <div class="form_item_label">
                  <span class="name">打款权限</span>
                  <span class="tips">有权打款的人</span>
                </div>
              </template>
              <div class="form_item_content">
                <div style="display: flex; align-items: center; gap: 5px">
                  <el-select
                    v-model="withdrawSetVo.payEmpIds"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="请选择"
                    fit-input-width
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in customersData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <div style="display: flex; justify-content: flex-end; width: 100%">
          <HButton is-modal type="primary" @click="saveWithdrawSetFu()">保存</HButton>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import setInputValue from '@/utils/money'
  import { empPageSelecct } from '@/api/organize'
  import { getWithdrawSet, saveWithdrawSet } from '@/api/withdrawal'
  import { ElMessage } from 'element-plus'
  import _ from 'lodash'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.financialSettlement.settlementSet,
  })

  const loading = ref(false)
  const withdrawSetVo = ref({
    empIds: [], //提现审核人员ID，当enableWithdrawCheck=true时，该字段必填
    enableOrderWithdraw: true, //是否开启工单提现功能：false-关闭，true-开启,示例值(true)
    enableWithdrawCheck: true, //是否开启提现审核：false-关闭，true-开启,示例值(true)
    id: 0, //提现ID，修改必传
    minWithdrawMoney: 100, //最低提现金额,示例值(100)
    monthWithdrawQty: 10, //每月提现次数,示例值(10)
    withdrawFreezeDay: 7, //提现冻结期,示例值(7)
    payEmpIds: [],
  })
  // 使用 ref 来缓存客服数据
  const customersData = ref([])

  // 获取客服
  const getworkTeamPageSelect = (val: string) => {
    empPageSelecct({
      limit: 10000,
      name: val,
      page: 0,
    }).then((res) => {
      if (res.data.success) {
        customersData.value = res.data.data.rows
      }
    })
  }
  // 搜索职员下拉数据
  const empVal = ref('')
  const searchEmpSelect = _.throttle((query: string) => {
    if (empVal.value !== query) {
      empVal.value = query
      getworkTeamPageSelect(empVal.value)
    }
  }, 500)
  // 获取详情
  const getWithdrawSetFu = () => {
    getWithdrawSet().then((res) => {
      if (res.data.success) {
        withdrawSetVo.value = { ...res.data.data.row }
        if (!withdrawSetVo.value.payEmpIds) {
          withdrawSetVo.value.payEmpIds = []
        }
      } else {
        if (res.data.isError)
          ElMessage({
            showClose: true,
            message: res.data.message,
            duration: 3000,
            type: res.data.success ? 'success' : 'error',
          })
      }
    })
  }
  // 保存
  const saveWithdrawSetFu = () => {
    if (withdrawSetVo.value.enableWithdrawCheck && withdrawSetVo.value.empIds.length == 0) {
      ElMessage({
        showClose: true,
        message: '请选择有权审核提现的人',
        duration: 3000,
        type: 'error',
      })
      return
    }
    loading.value = true
    saveWithdrawSet(withdrawSetVo.value).then((res) => {
      loading.value = false
      if (res.data.isError)
        ElMessage({
          showClose: true,
          message: res.data.message,
          duration: 3000,
          type: res.data.success ? 'success' : 'error',
        })
      // if (res.data.success) {
      //     getWithdrawSetFu()
      // }
    })
  }
  onMounted(() => {
    loading.value = true
    Promise.all([getworkTeamPageSelect(''), getWithdrawSetFu()]).then(() => {
      loading.value = false
    })
  })
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
